<template>
	<div class="px-5 py-2 main-content-bg-color" >
		<card 
		:ref="item.dataName"
		:title="item.title?item.title:''"
		:data="item.data()"
		:dataName="item.dataName"
		v-for="(item,index) in navBar" :key="index"
		
		:showTitle="item.showTitle?item.showTitle:true"
		:isFirst="item.isFirst?item.isFirst:false"
		></card>
		
	</div>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import card from "@/components/card/card.vue"
	export default{
		components:{
			card
		},
		mounted() {
			//监听屏幕宽度变化
			$(window).resize(()=>{          //当浏览器大小变化时
				
				setTimeout(()=>{
					for (let key in this.$refs) {
						if(this.$refs[key] && this.$refs[key][0]){
							this.$refs[key][0].getItemsHeight()
						}
					}
				},300)
			});
		},
		data(){
			return {
				navBar:[
					{
						title:"管理工具",
						data:()=>this.management,
						dataName:"management",
						isFirst:true,
						
					},
					{
						title:"宏观选址",
						data:()=>this.MacroLocation,
						dataName:"MacroLocation",
						
						
					},
					{
						title:"测风",
						data:()=>this.anemometry,
						dataName:"anemometry",
						
					},
					{
						title:"地图处理",
						data:()=>this.mapDeal,
						dataName:"mapDeal",
						
					},
					{
						title:"仿真",
						data:()=>this.modeTrue,
						dataName:"modeTrue",
						
						
					},
					{
						title:"后处理",
						data:()=>this.effImp,
						dataName:"effImp",
						
					},
					{
						title:"后评估",
						data:()=>this.latterEnva,
						dataName:"latterEnva",
						
					},
					{
						title:"效率提升工具",
						data:()=>this.postEva,
						dataName:"postEva",
						
					},
					{
						title:"数据服务",
						data:()=>this.dataService,
						dataName:"dataService",
					},
					{
						title:"APP市场",
						data:()=>this.qr_code1,
						dataName:"qr_code1",
						
					},
					{
						
						data:()=>this.qr_code2,
						dataName:"qr_code2",
						
						showTitle:false
					},
				]
			}
		},
		
		computed:{
			...mapState({
				management:state=>state.management,
				MacroLocation:state=>state.MacroLocation,
				anemometry:state=>state.anemometry,
				mapDeal:state=>state.mapDeal,
				modeTrue:state=>state.modeTrue,
				effImp:state=>state.effImp,
				latterEnva:state=>state.latterEnva,
				postEva:state=>state.postEva,
				dataService:state=>state.dataService,
				qr_code1:state=>state.qr_code1,
				qr_code2:state=>state.qr_code2
			})
		}
	}
</script>

<style>
	
	
	

</style>
